<!--
 * @Author: NieYB
 * @LastEditors: NieYB
 * @Date: 2021-03-08 16:44:17
 * @LastEditTime: 2021-03-08 18:16:44
 * @Email: 18642124585@163.com
 * @FilePath: \hm-web\src\views\home\channelEdit.vue
 * @Environment: Win 8.1 javaScript
 * @Description: home页底部弹出层的内容组件
-->
<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
          <van-button
          size="mini"
          type="info"
          @click="isEditing=!isEditing"
          >{{isEditing ? '取消' : '编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(channel, idx) in channel"
          :key="channel.id"
          @click="clickChannel(idx)"
          :class="{red:idx===curIndex}">
          <span>{{channel.name}}</span>
          <!-- 只有当：isEditing为true 并且 不是推荐 ， 显示X -->
          <van-icon
            name="cross"
            class="btn"
            v-show="isEditing&&idx!==0">
          </van-icon>
        </van-grid-item>
      </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item v-for="fiterchannel in recommendChannels"
        :key="fiterchannel.id"
        @click="hAddchannel(fiterchannel)">
          <span>{{fiterchannel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getChannelsList, addChannels, delChannel } from '../../api/channel.js'
export default {
  name: 'ChannelEdit',
  props: [
    'channel', // 当前我的频道列表
    'curIndex' // 接收当前频道的索引
  ],
  data () {
    return {
      allChannels: [], // 所有频道
      channeldd: this.channel,
      recommendChannelssss: this.recommendChannels,
      isEditing: false // 是否处于编辑状态
    }
  },
  created () {
    this.getChannelsList() // 获取频道列表
  },
  computed: {
    // 根据已有数据生成新的数据 ---- 计算属性
    recommendChannels () {
      const arr = this.allChannels.filter(channel => {
        const idx = this.channel.findIndex(item => item.id === channel.id)
        if (idx === -1) {
          return true
        } else {
          return false
        }
      })
      return arr
    }
  },
  methods: {
    // 删除频道
    clickChannel (idx) {
      if (this.isEditing) {
        this.doDeleteChannel(idx)
      } else {
        this.$emit('call-channel', idx)
      }
    },
    async doDeleteChannel (idx) {
      console.log('1', this.channel[idx])
      // 1. 根据下标找到id
      const id = this.channel[idx].id
      console.log('你要删除的频道id是', id)
      // 2. 发请求
      try {
        const res = await delChannel(id)
        console.log(res)
        this.$toast.success('删除频道成功')
        // 如果你删除的频道在当前的频道之前，则要去更新一下父组件中的
        // active
        if (idx < this.curIndex) {
          this.$emit('fixed-active-index')
        }
      } catch (err) {
        console.log(err)
        this.$toast.fail('删除频道失败')
      }
      // 3. 更新视图
      //  从我的频道中，把当前项删除
      this.channel.splice(idx, 1)
    },
    // 添加频道
    // 1.发送Ajax请求
    async  hAddchannel (fiterchannel) {
      try {
        console.log(fiterchannel)
        const arr = [...this.channel, fiterchannel].map((item, idx) => {
          return {
            id: item.id,
            seq: idx
          }
        })
        arr.splice(0, 1) // 删除推荐频道
        // 2.调用接口
        const res = await addChannels(arr)
        console.log(res)
        // 3.更新视图
        this.channel.push(fiterchannel)
        this.$toast.success('添加频道成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('添加频道失败')
      }
    },
    // 获取频道列表
    async getChannelsList () {
      try {
        const res = await getChannelsList()
        console.log(res)
        this.allChannels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
    // call-channel
    // clickChannel (e, idx) {
    //   this.$emit('call-channel', idx)
    // }
  }
}
</script>

<style lang="less" scoped>
  .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: -13px;
    right: -20px;
    font-size: 20px;
}
// 高亮显示
.red {
  color: orange;
  font-weight: bold;
}
// 编辑按钮
.editBtn {
    color: rgb(229, 97, 91) !important;
    margin-right:10px;
    padding:0 10px;
    border-color: rgb(229, 97, 91);
  }
</style>
